<template>
  <div class="analysis-domain-log-table">
    <Table
      ref="analysisDomianLogTable"
      :loading="loading"
      :columns="columns"
      :data="list"
      :disabled-hover="true"
      stripe
    >
      <template slot="index" slot-scope="{ index }">
        <span>{{ (pageData.page - 1) * pageData.limit + (index + 1) }}</span>
      </template>
      <template slot="endTime" slot-scope="{ index, row }">
        <Select :value="row.endTime" @on-change="selectEvent($event, index)">
          <Option v-for="item in endTimeList" :key="item.id" :value="item.id">{{
            item.label
          }}</Option>
        </Select>
      </template>
      <template slot="price" slot-scope="{ index, row }">
        <Input
          :value="row.price"
          type="number"
          @on-change="inputBlur($event, index, 'price')"
        />
      </template>
      <template slot="comment" slot-scope="{ index, row }">
        <Input
          :value="row.comment"
          type="text"
          @on-blur="inputBlur($event, index, 'comment')"
        />
      </template>
      <template slot="action" slot-scope="{ row }">
        <Button @click="remove(row.domainName)">移除</Button>
      </template>
    </Table>
    <div class="form-page-bottom-area flx-row-e-c">
      <Page
        :total="pageData.total"
        :current="pageData.page"
        :page-size="pageData.limit"
        :page-size-opts="pageData.pageSizeOpts"
        show-elevator
        show-sizer
        show-total
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "PutTable",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    pageData: {
      type: Object,
      default: () => {
        return {
          total: 0,
          page: 1,
          limit: 10,
          pageSizeOpts: [10, 15, 20],
        };
      },
    },
  },
  data() {
    return {
      endTimeList: [
        { id: 0, label: "长期" },
        { id: 1, label: "6个月" },
        { id: 2, label: "3个月" },
        { id: 3, label: "1个月" },
        { id: 4, label: "7天" },
      ],
      columns: [
        {
          width: 60,
          title: "序号",
          slot: "index",
        },
        {
          width: 200,
          title: "域名",
          key: "domainName",
          align: "center",
        },
        {
          width: 120,
          title: "交易结束时间",
          slot: "endTime",
        },
        {
          width: 150,
          title: "一口价（元）",
          slot: "price",
        },
        {
          title: "域名含义",
          slot: "comment",
        },
        {
          width: 100,
          title: "操作",
          slot: "action",
        },
      ],
    };
  },
  methods: {
    pageChange(val) {
      this.$emit("pageChange", val);
    },
    pageSizeChange(val) {
      this.$emit("pageSizeChange", val);
    },
    // 修改交易结束时间
    selectEvent(event, index) {
      this.$emit("update", { key: "endTime", index, value: event });
    },
    // 输入框改变事件
    inputBlur(event, index, key) {
      this.$emit("update", { key, index, value: event.target.value });
    },
    remove(domainName) {
      this.$emit("remove", domainName);
    },
  },
};
</script>
<style lang="scss" scoped>
.analysis-domain-log-table /deep/ {
  margin-top: 20px;
  .form-page-bottom-area {
    border: none;
  }
  .ivu-table-wrapper {
    overflow: inherit;
    .ivu-table {
      overflow: inherit;
    }
    .ivu-table-cell {
      &:nth-child(1) {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .ivu-table-header {
      border-top: 1px solid #e8eaec;
      border-left: 1px solid #e8eaec;
      border-right: 1px solid #e8eaec;
    }
    .ivu-table-row {
      border-left: 1px solid #e8eaec;
      border-right: 1px solid #e8eaec;
      &:hover {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        // border-color: transparent;
        // transform: scale(1.01);
      }
    }
  }
}
</style>
